<template>
  <div style="height: 100%">
    <div
      style="display: flex; flex-direction: row; justify-content: space-between"
      class="ivu-mb-8"
    >
      <span
        style="display: inline-block; font-weight: bolder; font-size: 18px; color: #1a1a1c"
        class="ivu-mb-8"
        >异常检测:</span
      >
      <div style="font-size: 16px; color: #565353; font-weight: 700">{{
        dayjs().format('YYYY年MM月DD日')
      }}</div>
    </div>

    <vue-seamless-scroll
      :data="listData"
      class="seamless-warp"
      :class-option="defaultOption"
      style="border: 1px solid #91b9d9"
    >
      <div
        style="height: 35px; line-height: 35px; border: 1px solid #91b9d9; margin-bottom: 5px"
        v-for="(item, index) in listData"
        :key="index"
      >
        <div style="display: flex; flex-direction: row">
          <div style="flex-grow: 2; color: #000000; font-size: 14px; margin-left: 15px">
            生产一区
          </div>
          <div style="flex-grow: 1; color: #000000; font-size: 14px"> 无尘环境 </div>
          <div style="flex-grow: 1; color: #000000; font-size: 14px"> 18~24℃ </div>
          <div style="flex-grow: 1; color: #000000; font-size: 14px"> 空气优 </div>
        </div>
        <span class="contentSP" style="">102细纱机机台电量异常</span>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script setup>
  // import vueSeamlessScroll from 'vue-seamless-scroll'
  import dayjs from 'dayjs'

  const listData = ref([])
  // const time = ref()

  // const ceBianLanShow = () => {
  //   listData.value = []
  // }

  const defaultOption = computed(() => {
    return {
      step: 0.15, // 数值越大速度滚动越快
      limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
    }
  })
</script>

<style scoped>
  .seamless-warp {
    height: calc(100% - 60px);
    /*border: 3px solid #5b5555;*/
    overflow: hidden;
  }

  .contentSP {
    color: floralwhite;
    font-size: 18px;
    margin-left: 10px;
    padding-bottom: 15px;
  }
</style>
